<template>
  <div class="mobile">
    <div class="flexColumn" :class="$store.state.isMobile?'ismobileHeader':'pcHeader'">
      <!-- <header-tab :header-title="headerTitle" :show-arrow="false"></header-tab> -->
      <div class="titleTab cascader titleHeight">
        <el-cascader v-model="value" :options="newcrr" @change="handleChange" :placeholder="dateDefault" id="seleter">
        </el-cascader>
      </div>
    </div>
    <section class="mgT16">
      <div>
        <!-- <mt-datetime-picker
          v-model="pickerVisible"
          ref="pickerData"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          :start-date="startDate"
          :end-date= "endDate"
        ></mt-datetime-picker>-->
        <!-- <mt-actionsheet
        :actions= "data"
        v-model="close">
        </mt-actionsheet>-->
      </div>
      <div class="pcSectionContent flexConent">
        <div class="sectionTopBox pcLeft">
            <div class="titleDomBox">
                <div class="titleDom">月度单据总览</div>
                <p class="titleDom1">以下数据均为平均值</p>
              </div>
          <div class="flexCenter business">
            <p class="flexCenter">
              <span class="bgColororange1"></span>
              <i>业务审核</i>
            </p>
            <p class="flexCenter">
              <span class="bgColororange2"></span>
              <i>打包邮寄</i>
            </p>
            <p class="flexCenter">
              <span class="bgColororange3"></span>
              <i>共享处理</i>
            </p>
          </div>
          <div class="flexCenter amountSum">
            <div>
              <span><i class="numFontFamily">{{XSH_AMOUNT}}</i>单</span>
            </div>
            <div>
              <span><i class="numFontFamily">{{XYFK_AMOUNT}}</i>单</span>
            </div>
            <div>
              <span><i class="numFontFamily">{{LJK_AMOUNT}}</i>单</span>
            </div>
          </div>
          <Eatch :obj="obj"></Eatch>
          <div class="detail">
            <el-button type="primary" plain round @click="toDetail">查看详情</el-button>
          </div>
        </div>
        <div class="water-hliquid pcRight">
          <div class="titleDomBox contrastSelect">
            <div class="titleDom">对比分析</div>
            <el-select v-model="potValue" placeholder="请选择" @change="changeHandle" size="mini">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="sectionBottomBox flexConent">
            <Hliquid :value="hliquid"></Hliquid>
            <div>
              <p>
                您的平均时长
                <span class="numFontFamily">{{ indiviAvgDay|indiviAvgDay}}</span>
                天
              </p>
              <p>
                集团平均时长
                <span class="numFontFamily">{{ avgtime | indiviAvgDay }}</span>
                天
              </p>
              <div v-if="showMoreDay" class="moreDay">
                <div>
                  您的打包邮寄时间超过
                  <span><span class="numFontFamily">3</span>天</span>
                  <br />下次要抓紧哦!
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  import Eatch from "../components/commons/home/paymentReport";
  import Hliquid from "../components/commons/home/Hliquid";
  import headerTab from "../components/commons/headerTab"

  export default {
    components: { Hliquid, Eatch },
    data() {
      return {
        num: "30px",
        obj: {},
        potValue: "XSH",
        hliquid: 0,
        close: true,
        headerTitle: "个人付款报告",
        endDate: new Date(),
        pickerVisible: new Date(),
        startDate: new Date(new Date().setFullYear(new Date().getFullYear() - 2)),
        time: "",
        data: [
          {
            name: "拍照"
            //         method : this.getCamera	// 调用methods中的函数
          },
          {
            name: "从相册中选择"
          }
        ],
        options: [
          {
            value: "XSH",
            label: "非信用付款"
          },
          {
            value: "XYFK",
            label: "信用付款"
          },
          {
            value: "LJK",
            label: "领借款"
          }
        ],
        individuadata: null,
        indiviAvgDay: 0,
        avgtime: 0,
        value: [],
        roleType: 0,
        orgCode: "",
        newcrr: [],
        fsrpamsg: [],
        dateDefault: "2019/10"
      };
    },
    created() {
      this.getReportDetail();
      // if (this.$store.state.isMobile) {
      //           this.$router.replace('/');
      //       } else {
      //           this.$router.replace('/PC');
      //       }
    },
    computed: {
      detailName() {
        return this.methodApi.getQueryVariable("token");
      },
      userCode() {
        return this.methodApi.getQueryVariable("usercode");
      },
      XSH_AMOUNT() {
        return this.obj &&
          this.obj.individuadata &&
          this.obj.individuadata.XSH_AMOUNT != 0
          ? this.obj.individuadata.XSH_AMOUNT * 1
          : 0;
      },
      XYFK_AMOUNT() {
        return this.obj &&
          this.obj.individuadata &&
          this.obj.individuadata.XYFK_AMOUNT != 0
          ? this.obj.individuadata.XYFK_AMOUNT * 1
          : 0;
      },
      LJK_AMOUNT() {
        return this.obj &&
          this.obj.individuadata &&
          this.obj.individuadata.LJK_AMOUNT != 0
          ? this.obj.individuadata.LJK_AMOUNT * 1
          : 0;
      },
      showMoreDay() {
        return (
          this.obj && this.obj.avgtimedata && this.obj.avgtimedata.XSH_DBYD > 3
        );
      },
      orgName() {
        return this.obj && this.obj.roleType ? this.obj.roleType.orgName : "";
      }
    },
    filters: {
      indiviAvgDay(data) {
        return data ? data : 0;
      }
    },
    mounted() {
      //  this.$refs.pickerData.open();
      // window.addEventListener("resize", function() {
      //   this.appWidth =
      //     document.getElementById("app").width + "px" + " " + "!important";
      // });
    },
    methods: {
      rentInformat() {
        this.$router.push("/rentInformation");
      },
      dataClick() {
        this.$refs.pickerData.open(); // 触发
        // this.$refs.pickerData.close() ; // 关闭
      },
      handleConfirm(val) {
        console.log(val, this.pickerVisible);
        this.time = val;
      },
      handleChange(value) {
        this.$axios
          .post(this.$api.personalIntef, {
            //wanghaijie this.methodApi.getQueryVariable("name")
            params: {
              access_token: this.methodApi.getQueryVariable("token"),
              userCode: this.methodApi.getQueryVariable("usercode"),
              yearv: value[0],
              orgCode: "",
              mon: value[1],
              roleType: "0"
            }
          })
          .then(response => {
            if (response.data.dataList) {
              this.obj = response.data.dataList;
              this.individuadata = this.obj.individuadata;
              this.roleType =
                this.obj && this.obj.roleType && this.obj.roleType.roleType
                  ? this.obj.roleType.roleType
                  : 0;
              this.orgCode =
                this.obj && this.obj.roleType && this.obj.roleType.orgCode
                  ? this.obj.roleType.orgCode
                  : "";
              this.hliquid = Number(
                this.individuadata && this.individuadata.XSH_PERCENTA
                  ? this.individuadata.XSH_PERCENTA
                  : 0
              );
              this.indiviAvgDay =
                this.individuadata && this.individuadata.AVG_SJ_XSH
                  ? this.individuadata.AVG_SJ_XSH
                  : "";
              this.avgtime =
                this.obj && this.obj.avgtimedata
                  ? this.obj.avgtimedata.AVG_SJ_XSH
                  : "";
            }
            if (response.data.dataList.ErrorCode == "000001") {
              if (this.$store.state.isMobile) {
                this.methodApi.AlertNoToken();
              } else {
                this.methodApi.pcAlertNoToken();
              }
            }
          })
          .catch(function (error) {
            console.log(error, "接口错误");
          });
      },
      changeHandle(val) {
        //  console.log(this.obj.individuadata);
        let PERCENTA = this.individuadata,
          AVGTIME = this.obj.avgtimedata;

        if (val == "XSH") {
          this.hliquid = Number(
            PERCENTA && PERCENTA.XSH_PERCENTA ? PERCENTA.XSH_PERCENTA : 0
          );
          this.indiviAvgDay = PERCENTA ? PERCENTA.AVG_SJ_XSH : "";
          this.avgtime = AVGTIME ? AVGTIME.AVG_SJ_XSH : "";
        } else if (val == "XYFK") {
          this.hliquid = Number(
            PERCENTA && PERCENTA.XYFK_PERCENTA ? PERCENTA.XYFK_PERCENTA : 0
          );
          this.indiviAvgDay = PERCENTA ? PERCENTA.AVG_SJ_XYFK : "";
          this.avgtime = AVGTIME ? AVGTIME.AVG_SJ_XYFK : "";
        } else {
          this.hliquid = Number(
            PERCENTA && PERCENTA.LJK_PERCENTA ? PERCENTA.LJK_PERCENTA : 0
          );
          this.indiviAvgDay = PERCENTA ? PERCENTA.AVG_SJ_LJK : "";
          this.avgtime = AVGTIME ? AVGTIME.AVG_SJ_LJK : "";
        }
      },
      toDetail() {
        this.$router.push({
          path: "/MobileTab",
          query: {
            data: this.detailName,
            userCode: this.userCode,
            roleType: this.roleType,
            orgCode: this.orgCode,
            orgName: this.orgName,
            value: this.value
          }
        });
      },
      getReportDetail() {
        this.roleType = 0;
        this.$axios
          .get(this.$api.getDateIntef)
          .then(res => {
            this.msg = res.data.dateList;
            let years = [];
            this.msg.forEach(item => {
              years.push(item.YEARV);
            });
            years = new Set(years);
            years.forEach(item => {
              let obj = {};
              let childrenarr = [];
              obj["value"] = item;
              obj["label"] = item;
              let farr = this.msg.filter(item1 => {
                return item1.YEARV == item;
              });
              farr.forEach(item2 => {
                childrenarr.push({
                  value: item2.MON,
                  label: item2.MON
                });
              });
              obj["children"] = childrenarr;
              this.newcrr.push(obj);
            });
            this.value = [this.newcrr[0].value, this.newcrr[0].children[0].value];
            this.dateDefault = this.newcrr.length
              ? this.newcrr[0].value + " / " + this.newcrr[0].children[0].value
              : 2019 / 10;
            this.$axios
              .post(this.$api.personalIntef, {
                params: {
                  access_token: this.methodApi.getQueryVariable("token"),
                  userCode: this.methodApi.getQueryVariable("usercode"),
                  yearv: this.newcrr[0].value,
                  orgCode: "",
                  mon: this.newcrr[0].children[0].value,
                  roleType: "0"
                }
              })
              .then(response => {
                if (response.data.dataList) {
                  this.obj = response.data.dataList;
                  this.individuadata = this.obj.individuadata;
                  this.roleType =
                    this.obj && this.obj.roleType && this.obj.roleType.roleType
                      ? this.obj.roleType.roleType
                      : 0;
                  this.orgCode =
                    this.obj && this.obj.roleType && this.obj.roleType.orgCode
                      ? this.obj.roleType.orgCode
                      : "";
                  this.hliquid = Number(
                    this.individuadata && this.individuadata.XSH_PERCENTA
                      ? this.individuadata.XSH_PERCENTA
                      : 0
                  );
                  this.indiviAvgDay =
                    this.individuadata && this.individuadata.AVG_SJ_XSH
                      ? this.individuadata.AVG_SJ_XSH
                      : "";
                  this.avgtime =
                    this.obj && this.obj.avgtimedata
                      ? this.obj.avgtimedata.AVG_SJ_XSH
                      : "";
                }
                if (response.data.dataList.ErrorCode == "000001") {
                  if (this.$store.state.isMobile) {
                    this.methodApi.AlertNoToken();
                  } else {
                    this.methodApi.pcAlertNoToken();
                  }
                }
              })
              .catch(function (error) {
                console.log(error, "接口错误");
              });
          })
          .catch(function (error) {
            console.log("error init." + error);
          });
      }
    }
  };
</script>

<style lang="scss">
  @import "../assets/css/mintui.css";

  .cascader {
    #seleter {
      line-height: 0.8rem;
      /* width: 42%; */
      max-width: 2.4rem;
      max-height: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: numFontFamily !important;

      .el-input--suffix {
        min-width: 1rem !important;
      }

      .el-input__inner {
        background-color: #fff !important;
        color: #333 !important;
        font-size: 0.3rem;
        border: none;
        font-weight: bold;
      }
    }
    .el-input__prefix,
    .el-input__suffix {
      color: #333 !important;
    }
  }
  /* 下来日期搜索框 */
  .el-cascader-panel .el-cascader-menu__wrap {
      height: 4rem;
      font-size: 0.3rem;
      font-family: numFontFamily;
    }

  input::-webkit-input-placeholder {
    color: #333 !important;
    font-size: 0.32rem;
  }

  /* 改变文本框宽度 */
  #seleter>>>.el-input__inner {
    border: 0 !important;
    background-color: #f2f2f2 !important;
    min-width: 2.2rem !important;
    max-width: 3.4rem !important;
  }
  .el-input--suffix .el-input__inner{
    padding-right: 0.4rem !important;
  }
  .el-input__inner {
    padding: 0 0.3rem !important;
  }
  .mobile {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .mobile>>>.el-dropdown {
    background: #f2f2f2;
    width: 100%;
  }

  /*头部：业务审核、打包邮寄、共享处理*/
  .business {
    width: 80%;
    margin: 0 auto;
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 0.24rem;
    color: #a29d9f;

    p {
      width: 33.3%;
      display: flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      margin: 0 0.2rem;
    }

    span {
      display: inline-block;
      border-radius: 0.04rem;
      margin-right: 0.1rem;
      width: 0.24rem;
      height: 0.24rem;
    }
  }

  .pcbusiness {
    width: 80%;
    margin: 0 auto;
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #a29d9f;

    p {
      width: 33.3%;
      display: flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      margin: 0 10px;
    }

    span {
      display: inline-block;
      border-radius: 4px;
      margin-right: 10px;
      width: 20px;
      height: 20px;
    }
  }

  .amountSum {
    width: 94%;
    margin: 0.4rem auto 0 auto;

    div {
      width: 28%;
      height: 0.76rem;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        width: 0.76rem;
        height: 100%;
        text-align: center;
        border-radius: 0.76rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #A6B2CE;
        border: 1px solid rgba(170, 181, 208, 0.2);
      }
    }
  }

  .compon {
    width: 100%;
    display: flex;
    flex: row;
    justify-content: center;
    align-items: center;
    justify-items: center;
  }

  .water-hliquid {
    /* border-top: 5px solid #f2f2f2;
    padding: 0.1rem 0.15rem 0; */
    box-sizing: border-box;
  }

  .detail {
    width: 100%;
    text-align: center;
    padding: 0.6rem 0;
    .el-button--primary.is-plain {
    width: 3rem;
    height: 0.86rem;
    font-size: 0.3rem;
  }
  }

  .sectionBottomBox p {
    padding-top: 0.22rem;
    font-size: 0.26rem;
    color: #666;
    box-sizing: border-box;

    span {
      font-weight: 700;
    }
  }

  .sectionBottomBox .moreDay {
    margin-top: 0.14rem;
    font-size: 0.24rem;
    line-height: 0.4rem;
    color: #999;

    span {
      font-weight: 700;
      color: #666;
    }
  }

  .contrastSelect .el-select {
    min-width: 1.6rem;
    max-width: 2.4rem;

    /* width: 50%; */
    .el-input--mini .el-input__inner {
      border: none !important;
      color: #333;
      font-size: 0.28rem;
      background-color: #f8f8f8 !important;
    }

    .el-input .el-select__caret {
      font-size: 0.28rem;
      color: #333 !important;
    }
  }
</style>